<template>
	<view class="register-container">
		<view class="logo">
			<image src="/static/logo.png" mode="aspectFit"></image>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm" :rules="rules">
				<u-form-item label="用户名" prop="username">
					<u-input v-model="form.username" placeholder="请输入用户名" />
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<u-input v-model="form.password" type="password" placeholder="请输入密码" />
				</u-form-item>
				<u-form-item label="确认密码" prop="confirmPassword">
					<u-input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码" />
				</u-form-item>
				<u-form-item label="昵称" prop="nickname">
					<u-input v-model="form.nickname" placeholder="请输入昵称" />
				</u-form-item>
			</u-form>
			<view class="btn-group">
				<u-button type="primary" @click="handleRegister" :loading="loading">注册</u-button>
				<u-button type="info" @click="goToLogin">返回登录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
					confirmPassword: '',
					nickname: ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}, {
						min: 3,
						max: 20,
						message: '用户名长度在3-20个字符之间',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}, {
						min: 6,
						max: 20,
						message: '密码长度在6-20个字符之间',
						trigger: ['blur', 'change']
					}],
					confirmPassword: [{
						required: true,
						message: '请再次输入密码',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							if (value !== this.form.password) {
								callback(new Error('两次输入的密码不一致'))
							} else {
								callback()
							}
						},
						trigger: ['blur', 'change']
					}],
					nickname: [{
						required: true,
						message: '请输入昵称',
						trigger: ['blur', 'change']
					}]
				},
				loading: false
			}
		},
		methods: {
			// 处理注册
			async handleRegister() {
				try {
					// 表单验证
					await this.$refs.uForm.validate()
					
					this.loading = true
					const { result } = await uniCloud.callFunction({
						name: 'user',
						data: {
							action: 'register',
							data: {
								username: this.form.username,
								password: this.form.password,
								nickname: this.form.nickname
							}
						}
					})
					
					if (result.code === 0) {
						uni.showToast({
							title: '注册成功',
							icon: 'success',
							duration: 1500
						})
						
						// 延迟跳转到登录页
						setTimeout(() => {
							this.goToLogin()
						}, 1500)
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'none'
						})
					}
				} catch (e) {
					if (e.message) {
						uni.showToast({
							title: e.message,
							icon: 'none'
						})
					}
				} finally {
					this.loading = false
				}
			},
			
			// 跳转到登录页
			goToLogin() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-container {
		padding: 40rpx;
		
		.logo {
			text-align: center;
			margin: 60rpx 0;
			
			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
		
		.form {
			margin-top: 40rpx;
		}
		
		.btn-group {
			margin-top: 60rpx;
			
			.u-button {
				margin-bottom: 30rpx;
			}
		}
	}
</style> 